<!--
<template>
  <form class="login_page">
    <div class="login_box">
      <div class="login_title">
        <span>我是登录界面</span>
      </div>
      <p v-show="message">{{message}}</p>
      <div class="userName">
        <span>用户名:</span>
        <input type="text" placeholder="请输入用户名" v-model="user.name">
      </div>
      <div class="userPwd">
        <span>密&nbsp;&nbsp;码:</span>
        <input type="password" placeholder="请输入密码" v-model="user.password">
      </div>
      <input @click="sub()" class="btn" type="submit">
    </div>

    <div class="box">
      <ol>　　　　　　
        <li v-for="(item,$index) in items" @click="selectStyle (item, $index) "
            :class="{'active':item.active,'unactive':!item.active}">
          　　　　　<span>{{item.select}}</span>
        </li>
        　　　
      </ol>
      　
    </div>
  </form>
</template>

<style lang="scss">
  .login_page {
    width: 100%;
    height: 630px;
    background: peachpuff;
  }

  .login_box {
    width: 90%;
    height: 300px;
    background: peru;
    margin-left: 5%;
    text-align: center;
    box-shadow: 1px 1px 5px #666;
    .login_title {
      height: 60px;
      background: peachpuff;
      text-align: center;
      span {
        font-size: 26px;
        font-family: 华文行楷;
        font-weight: bold;
        line-height: 60px;
        text-shadow: 2px 2px 6px #666;
      }
    }
    p {
      line-height: 36px;
      font-size: 15px;
      color: #fff;
    }
    .userName {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      span {
        font-size: 23px;
        font-weight: bold;
        font-family: 华文行楷;
        text-shadow: 2px 2px 6px #666;
      }
      input {
        width: 70%;
        height: 40px;
      }
    }
    .userPwd {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      span {
        font-size: 23px;
        font-weight: bold;
        font-family: 华文行楷;
        text-shadow: 2px 2px 6px #666;
      }
      input {
        width: 70%;
        height: 40px;
      }
    }
    .btn {
      width: 60%;
      height: 40px;
      background: #000000;
      outline: none;
      border: none;
      color: #fff;
      font-size: 22px;
      font-family: 华文行楷;
      border-radius: 10px;
      margin-top: 20px;
      box-shadow: 1px 1px 3px #dfdfdf;
    }
  }

  .box {
    width: 100%;
    margin-top: 10px;
    height: 300px;
  }

  .box ol {
    text-align: center;
  }

  .box ol li {
    width: 30%;
    float: left;
    padding: 15px;
    line-height: 30px;
    margin-left: 2.5%;
    margin-top: 10px;
    font-size: 15px;
  }

  .active {
    color: red;
    border: 1px solid #ff0000;
    border-radius: 5px;
  }

  .unactive {
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
  }

</style>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        message: false,
        //  isLogin:false,
        user: {
          name: '',
          password: ''
        },
        active: false,
        items: [
          {select: '辣子鱼块'},
          {select: '红烧鱼'},
          {select: '麻辣鱼'},
          {select: '水煮鱼'},
          {select: '剁椒鱼头'},
          {select: '红烧排骨'},
          {select: '毛血旺'},
          {select: '水煮肉片'},
          {select: '辣椒炒肉'},
          {select: '炝炒时蔬'},
        ],
        example0: "",
        example1: "",
        example2: {
          inner0: 1,
          innner1: 2
        },
        curVal: '',
        oldVal: ''
      }
    },
    watch: {
      example0(curVal, oldVal) {
        console.log(curVal, oldVal);
      },
      example1: 'a',
      example2: {
        handler(curVal, oldVal) {
          conosle.log(curVal, oldVal)
        },
        deep: true
      }
    },
    methods: {
      sub() {
        if ((this.user.name == '' || this.user.name == null) && (this.user.password == '' || this.user.password == null)) {
          this.message = '用户名和密码不能为空'
        }
        else {
          const isTrue = /^[a-zA-Z0-9_-]{4,16}$/.test(this.user.name)
          if (!isTrue) {
            this.message = '用户名为数字字母下划线减号(4-16)'
          }
          else {
            this.message = '用户名输入正确'
            if (this.user.password.length < 6 || this.user.password.length > 12) {
              this.message = '密码长度为6-12位'
            }
            else {
              this.message = '密码输入正确，正在登陆。。。。'
            }
          }

        }
      },
      selectStyle(item, index) {
        this.$nextTick(function () {
          this.items.forEach(function (item) {
            Vue.set(item, 'active', false);
          });
          Vue.set(item, 'active', true);
          console.log(item.select)
        });
      },
      showAlert() {
        alert('登录中，请稍等哦！')
      },
      getdata() {
//        alert(this.oldVal)
      }
    }
  }
</script>
-->
<!--
<template>
  <div id="app" class="box">
    <ul class="tabs clearfix">
      <li v-for="(tab,index) in tabsName">
        <a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
      </li>
    </ul>

    <div class="cards">
      <div class="tab-card" style="display: block;">这里是HTML教程</div>
      <div class="tab-card">欢迎来到CSS模块</div>
      <div class="tab-card">嗨，这里是Vue</div>
    </div>
  </div>
</template>

<style lang="scss">


</style>

<script>
  export default {
    data() {
      return {
        tabsName: [{
          name: "HTML",
          isActive: true
        }, {
          name: "CSS",
          isActive: false
        }, {
          name: "Vue",
          isActive: false
        }],
        active: false
      }
    },
    watch: {},
    methods: {
      tabsSwitch: function(tabIndex) {

        var tabCardCollection = document.querySelectorAll(".tab-card"),
          len = tabCardCollection.length;

        for(var i = 0; i < len; i++) {
          tabCardCollection[i].style.display = "none";
          this.tabsName[i].isActive = false;
        }
        this.tabsName[tabIndex].isActive = true;
        tabCardCollection[tabIndex].style.display = "block";
      }
    }
  }
</script>
-->
<template>
  <div class="check-publish">
    <head-top head-title="发布查验" hidden='true' go-back="true"></head-top>
    <div class="text">
      <textarea name="" id="" placeholder="请对查验的结果进行描述..." cols="30" rows="10" v-model="value"
                maxlength="200"></textarea>
      <div class="count">
        {{0}}/{{200}}
      </div>
    </div>
    <div class="split"></div>
    <div class="check-name">
      <mt-field label="用户名" placeholder="请输入你的真实姓名" v-model="username"></mt-field>
      <mt-field label="查验标题" placeholder="请输入查验的标题" v-model="checkTitle"></mt-field>
      <mt-field label="联系方式" placeholder="请输入你的手机号码" type="tel" v-model="phone" :attr="{maxlength: 11}"></mt-field>
      <mt-field label="详细地址" placeholder="如：5幢1单元" type="tel" v-model="address"></mt-field>
    </div>
    <div class="split"></div>
    <mt-button>
      <img src="./images/search@2x.png" height="20" width="20" slot="icon">
      icon
    </mt-button>
    <mt-cell-swipe
      title="我是内容"
      :right="[
    {
      content: '删除',
      style: { background: 'red', color: '#fff' },
      handler: () => this.$messagebox('delete')
    }
  ]"></mt-cell-swipe>
    <div class="classfiy">
      <div class="line border-bottom-1px">
        请选择一个类别
      </div>
      <ul class="items clearfix">
        <li v-for="item in bills" class="item" @click="selectStyle(item)">
          <span class="title" :class="{'active':item.active,'unactive':!item.active}">
          {{item.title}}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'

  export default {
    name: 'CheckPublish',
    data() {
      return {
        value: '',
        username: '',
        checkTitle: '',
        phone: '',
        address: '',
        bills: [
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'},
          {title: '小区消防'}
        ]
      }
    },
    components: {
      headTop
    },
    methods: {
      selectStyle(item) {
        setTimeout(() => {
          this.bills.forEach(item => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
      }
    }
  }
</script>

<style lang="scss">

  .check-publish {
    background-color: #fff;
    padding-top: 40px;
    .mint-cell {
      min-height: 38px;
    }
    .mint-cell-wrapper {
      background-size: 100% 1px;
    }
    .mint-field .mint-cell-title {
      width: 80px;
    }
    .mint-field .mint-cell-value {
      font-size: 14px;
    }
    .text {
      padding: 10px;
      position: relative;
      textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        height: 120px;
        background: #f2f2f2;
        border-radius: 5px;
        resize: none;
        outline: none;
        border: none;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #0078de;
      }
    }
    .split {
      width: 100%;
      height: 10px;
      background-color: #f2f2f2;
    }
    .classfiy {
      padding: 0 10px;
      .line {
        height: 30px;
        line-height: 30px;
        border-bottom: #d9d9d9;
      }
      .items {
        .item {
          float: left;
          width: 25%;
          height: 40px;
          line-height: 45px;
          text-align: center;
          .title {
            border: 1px solid #d9d9d9;
            padding: 8px 10px;
            border-radius: 3px;
          }
          .active {
            border: 1px solid #0078de;
            padding: 8px 10px;
            border-radius: 3px;
          }
        }
      }
    }
  }
</style>

